<template>
  <Detail-dialog
    modal
    width="30"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save('dataForm')">
        <el-form ref="dataForm" label-width="90px" :model="employeeInfo" :rules="rules">
              <el-row>
                  <el-col :span="12">
                    <el-form-item label=" 离职日期" prop="departureDate">
                     <el-date-picker
                     v-model="employeeInfo.departureDate"
                      value-format="yyyy-MM-dd hh:mm:ss"
                     placeholder="选择离职日期"></el-date-picker>
                 </el-form-item>
                  </el-col>
              </el-row>
        </el-form>
  </Detail-dialog>
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
export default {
  props: {
    visible: Boolean,
    data: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: {DetailDialog},
  watch: {
    visible: {
      handler (val) {
        this.dialogShow = val
      },
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.employeeInfo = {...val}
          this.title = '离职员工：' + val.employeeName
        }
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      dialogShow: false,
      title: '',
      employeeInfo: {},
      rules: {
        departureDate: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (validate) {
          this.$emit('save', {employeeCode: this.employeeInfo.employeeCode, status: -1, departureDate: this.employeeInfo.departureDate})
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
